<template>
	<view class="container">
		<!-- <CustomNavbar title="收货地址"></CustomNavbar> -->
		<!-- 地址列表 -->
		<u-list>
			<u-list-item v-for="(item, index) in addressList" :key="index">
				<u-card :border="false" padding="10" :show-head="false" margin="20rpx">
					<template #body>
						<view class="address-item" @click="goBack(item)">
							<!-- 左侧信息 -->
							<view class="left">
								<view class="top">
									<text class="name">{{ item.delivery_name }}</text>
									<text class="phone">{{ item.delivery_phone }}</text>
									<u-tag v-if="parseInt(item.is_default)" text="默认地址" size="mini"
										borderColor="transparent" height="32rpx" bgColor="rgba(253, 56, 50, 0.2)"
										color="rgba(253, 56, 50, 1)" type="error" plain
										style="margin-left: 10rpx;font-size: 22rpx;" />
								</view>
								<view class="address-wrapper ">
									<view class="address">
										{{ item.prov }} {{ item.city }} {{ item.area }} {{ item.delivery_addr }}
									</view>
									<view class="action">
										<text @click.stop="handleEdit(item.id)">编辑</text>
										<view class="line">

										</view>
										<text @click.stop="handleDelete(item.id)" style="margin-left: 20rpx">删除</text>
									</view>
								</view>

							</view>

						</view>
					</template>
				</u-card>
			</u-list-item>
		</u-list>

		<!-- 新增按钮 -->
		<AddBtn title="新增地址" @addAddress="handleAdd" />
		<!-- 删除 -->
		<ConfirmDialog v-model:show="showDeleteDialog" title="删除地址" content="确定是否删除该地址呢，删除地址之后将不可恢复哦" confirmText="确认删除"
			@cancel="showDeleteDialog = false" @confirm="deleteAddress" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow,onLoad
	} from '@dcloudio/uni-app'
	import CustomNavbar from '@/components/CustomNavbar.vue'
	import AddBtn from '/addressPages/components/AddBtn.vue'
	import ConfirmDialog from '@/components/ConfirmDialog.vue'
	const type = ref(null)
	onLoad((options) => {
		if(options.type){
			type.value = options.type
		}
	})
	const showDeleteDialog = ref(false);
	const handleId = ref(null)
	const addressList = ref([])
	const goBack = (item) => {
		if(type.value){
			uni.setStorageSync('address',JSON.stringify(item))
			uni.navigateBack()
		}
	}
	const getData = () => {
		uni.$api.user.address().then(res => {
			if (res.code == 200) {
				addressList.value = res.data
			}
		})
	}


	// 删除地址逻辑
	const deleteAddress = () => {
		console.log('执行删除操作');
		uni.$api.user.delAddress({
			id: handleId.value
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: res.msg
				})
				// 使用Vue的响应式删除方法
				addressList.value = addressList.value.filter(item => item.id !== handleId.value)
			}
			showDeleteDialog.value = false;
		})

	};
	// 操作处理函数
	const handleEdit = (id) => {
		console.log('编辑地址', id)
		uni.navigateTo({
			url: '/addressPages/pages/address/add-address?id=' + id
		})
	}

	const handleDelete = (id) => {
		// console.log('删除地址', index)
		showDeleteDialog.value = true
		handleId.value = id
	}

	const handleAdd = () => {
		uni.navigateTo({
			url: '/addressPages/pages/address/add-address'
		})
	}
	onShow(() => {
		getData()
	})
</script>

<style lang="scss" scoped>
	.container {
		background: url('/static/index_slices/index_bg.png') no-repeat;
		background-size: 100% auto;
		padding-top: 28rpx;
		/* 导航栏高度 */
	}

	.address-item {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			flex: 1;
			margin-right: 30rpx;

			.top {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #002222;

				.name {

					margin-right: 35rpx;
				}
			}

			.address-wrapper {
				display: flex;
				justify-content: space-between;
			}

			.address {
				font-size: 28rpx;
				color: #666;
				line-height: 1.5;
				max-width: 478rpx;
			}

			.action {
				font-size: 22rpx;
				color: #878C9A;
				display: flex;
				margin-top: 6rpx;

				.line {
					width: 2rpx;
					height: 46rpx;
					background-color: #E6E8EE;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>